<template>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer> 
  <!-- <div>
    {{'定义字符串'+name}}-----{{num}}
  </div>
  <div>
    {{'定义数字'+num}}
  </div>
  <div>
    {{'定义数组'+arr}}---  {{arr.slice(0,3)}}
  </div>
  <div>
    {{obj}}---{{obj.age}}
  </div> -->


  <!-- <div @click="clickNum(100)">
    {{num}}
  </div>
  <div @click="clickNum1">
    {{num1}}
  </div>
  {{shu1}}-----{{shu2}}
  {{'计算属性的总和为'+addshu}}
  <button @click="he">add</button> -->
  <div>
    {{list}}
  </div>
  <div>
    <button @click="goto">跳转路由</button>
  </div>
</template>
<script>
import navHeader from '@/components/navHeader/navHeader'
import navMain from '@/components/navMain/navMain'
import navFooter from '@/components/navFooter/navFooter'
import {defineComponent,reactive,ref, toRefs,computed} from 'vue'
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'
export default defineComponent({
  name:'Home',
  components:{
    navHeader,
    navMain,
    navFooter,
  },
    setup(props,ctx){
    //store
    let store=useStore();
    let list=computed(()=>{
      return store.state.list
    })
    //计算属性
    let shu1=ref(20);
    let shu2=ref(30);
    let addshu=computed(()=>{
      return shu1.value+shu2.value
    })
    let he=()=>{
      shu1.value++;
      shu2.value++;
    }


    let data=reactive({
      num:15
    })
    let num1=ref(2);
    let name=ref('tom');
    let arr=ref(['one','two','three','four']);
    let obj=ref({
      age:20
    })
    let clickNum=(val)=>{
       console.log(val);
       //访问reactive定义的数据
       console.log('点击了Num-------'+data.num);
    }
    let clickNum1=()=>{
      //访问ref定义的数据,要写数据名.value
       console.log('点击了Num1-------'+num1.value);
    }
    //路由跳转  router是全局路由对象
    let router=useRouter();
    let goto=()=>{
      router.push('/detail')
    }

    //route 是当前路由对象
    //Start页面query 传递过来的都是字符串的类型
    let route=useRoute();
    console.log(route.query);
    console.log(route.query.age);


    //params传参
    // console.log(route.params);

    //params传参

    return {
      ...toRefs(data),
      name,
      arr,
      obj,
      num1,
      clickNum,
      clickNum1,
      shu1,
      shu2,
      addshu,
      he,
      list,
      goto
    }
  }
})
</script>
<style scoped lang='scss'>

</style>
